<template>
  <div class="container-fans">
      <el-card>
        <div slot="header">
            <my-bread>粉丝管理</my-bread>
        </div>
        <!-- 标签页 -->
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="粉丝列表" name="list">
            <!-- 列表 -->
            <div class="fans-list">
              <div class="fans-item" v-for="item in fans" :key="item.id.toString()">
                  <el-avatar :size="80"  :src="item.photo"></el-avatar>
                  <p>{{item.name}}</p>
                  <el-button type="primary" size="small" plain> + 关注</el-button>
              </div>
              <!-- 分页 -->
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="reqParams.per_page"
                :current-page="reqParams.page"
                @current-change="changePager">
              </el-pagination>
            </div>
            
          </el-tab-pane>
          <el-tab-pane label="粉丝画像" name="img">
              <div ref=bar style="width:600px;height:400px"></div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
    name:"page-fans",
    data(){
      return {
        activeName:'list',
        reqParams:{
          page:1,
          per_page:20,
        },
        //粉丝列表
        fans:[],
        total:0
      }

    },
    created(){
      this.getFans()
      //初始化echarts
      
    },
    //这个函数执行 的是dom元素才渲染完毕
    mounted(){
       //初始化echarts      
        this.initBar()
    },
    methods:{
      //初始化echarts的柱状图
      async initBar(){
         try{
            //console.log(this.$refs.bar)
            //初始化echarts
            const myCharts =  echarts.init(this.$refs.bar)
            //定义图表配置
            const option = {
              color: ['#3398DB'],
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: [
                  {
                      type: 'category',
                      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                      axisTick: {
                          alignWithLabel: true
                      }
                  }
              ],
              yAxis: [
                  {
                      type: 'value'
                  }
              ],
              series: [
                  {
                      name: '直接访问',
                      type: 'bar',
                      barWidth: '60%',
                      //x轴对应刻度数据
                      data: [10, 52, 200, 334, 390, 330, 220]
                  }
              ]
            }
            //获取数据,给option的数据赋值
            const res = await this.$http.get('statistics/followers')
            const obj = res.data.data.age
            const xAxisData = []
            const seriesData = []
            for (let key in obj ){
              xAxisData.push(key)
              seriesData.push(obj[key])
            }
            option.xAxis[0].data = xAxisData
            option.series[0].data=seriesData
            console.log(xAxisData);
            console.log(seriesData);


            //使用这个配置
            myCharts.setOption(option)
         }catch (e){
           this.$message.error('网络不稳定,多刷新几次试试!')
         }
      },
      //分页
      changePager(newPage){
        this.reqParams.page=newPage
        this.getFans()
      },
      //读取粉丝列表
      async getFans(){
         const res = await this.$http.get('followers',{params:this.reqParams})
        //const {data:{data}} =await this.$http.get('followers')
        // console.log(res);
         this.fans = res.data.data.results
         this.total = res.data.data.total_count
      }
    }
}
</script>

<style scoped lang="less">
  .fans-list{
    .fans-item{
      width: 150px;
      height: 180px;
      border: 1px solid #ddd;
      display: inline-block;
      margin-right: 61px;
      margin-top: 20px;
      text-align: center;
      .el-avatar{
        margin-top: 20px;
      }
    }
    .el-pagination{
      margin-top: 30px;
    }
  }
</style>